import { useNavigate } from 'react-router-dom'
import styles from './type1.module.css'
import { Search, Tag, Popup } from 'react-vant'
import { useEffect, useState } from 'react'
import { http } from '../../utils'


const Type = () => {
    const navigate = useNavigate()

    // 分类样式控制变量
    const [type, setType] = useState('全部')

    // 筛选
    const [sift, setSift] = useState('综合排序')
    const [sift1, setSift1] = useState('')
    const [state, setState] = useState(false)

    const [distance, setDistance] = useState('')
    const [price, setPrice] = useState('')
    const [num1, setNum1] = useState('')
    const [time, setTime] = useState('')

    useEffect(() => {
        if (sift != '') {
            if (sift == '距离最近') {
                setDistance(1)
                setPrice('')
            } else if (sift == '起送价最低') {
                setPrice(1)
                setDistance('')
            } else if (sift == '综合排序') {
                setDistance('')
                setPrice('')
            }
        }

        if (sift1 != '') {
            if (sift1 == '销量') {
                setNum1(1)
                setTime('')
            } else if (sift1 == '速度') {
                setTime(1)
                setNum1('')
            }
        }


    }, [sift, sift1,])


    useEffect(() => {
        getShop()

    }, [distance, price, num1, time, type])

    // 请求店铺
    const [shop, setShop] = useState([])

    const [kong, setKong] = useState(false)
    const getShop = async () => {
        let res = await http.get(`/wwz/getShop?distance=${distance}&time=${time}&price=${price}&num1=${num1}&type=${type}&buy=${true}`)
        if (res.code == 200) {
            setShop([...res.data])
            setKong(false)
        } else {
            setShop([])
            setKong(true)
        }
    }

    useEffect(() => {
        getShop()

    }, [])
    return (
        <div className={styles.body}>
            <div className={styles.top}>

                <div className={styles.b1}>
                    <img src="/le.svg" alt="" onClick={() => navigate(-1)} />
                    <p>美食团购</p>
                </div>

                <div className={styles.b2}>
                    <Search placeholder="请输入搜索内容"
                        shape='round'
                        background='none'
                        style={{ margin: '0.1rem 0rem', }}
                        onFocus={() => navigate('/outlet/find')}
                    />
                </div>

            </div>



            {/* 分类 */}
            <div className={styles.type}>
                {
                    [
                        { img: "/type1.svg", name: '全部' },
                        { img: "/class1.png", name: '快餐小吃' },
                        { img: "/class5.png", name: '休闲茶饮' },
                        { img: "/class6.png", name: '火锅自助' },
                        { img: "/class7.png", name: '中西餐' },
                    ].map((i, index) => {
                        return (
                            <div className={styles.item} key={index} onClick={() => setType(i.name)}>
                                <div className={type == i.name ? styles.img : styles.img1}>
                                    <img src={i.img} alt="" className={styles.bg} />
                                </div>
                                <p style={{ color: type == i.name ? '#ff644d' : '' }}>{i.name}</p>
                            </div>
                        )
                    })
                }





            </div>


            {/* 筛选 */}
            <div className={styles.b2}>
                <Tag color='none'
                    textColor={['综合排序', '距离最近', '起送价最低'].includes(sift) ? '#ff644d' : '#797979'} size='large'
                    onClick={() => { setState(true) }}
                >{sift}<img src="" alt="" /></Tag>
                <Popup
                    visible={state}
                    style={{ height: '30%' }}
                    position='top'
                    onClose={() => { setState(false) }}
                >
                    {
                        ['综合排序', '距离最近', '起送价最低'].map((i, index) => {
                            return (
                                <p key={index}
                                    className={styles.p1}
                                    onClick={() => {
                                        setSift(i)
                                        setState(false)
                                    }}
                                ><span className={sift == i ? styles.s1 : ''}>{i}</span>{sift == i ? <img src="/yse.svg" alt="" /> : ''}</p>
                            )
                        })
                    }

                </Popup>
                <Tag color='none' textColor={sift1 == '销量' ? '#ff644d' : '#797979'} size='large' onClick={() => { setSift1('销量') }}>销量</Tag>
                <Tag color='none' textColor={sift1 == '速度' ? '#ff644d' : '#797979'} size='large' onClick={() => { setSift1('速度') }}>速度</Tag>
            </div>


            {/* 商家 */}
            <div style={{ padding: "0rem .2rem" }}>
                {kong?<h1>暂无结果</h1>:''}
                {
                    shop.map((i, index) => {
                        return (
                            <div className={styles.recommend} onClick={() => navigate('/outlet/shop2')}>
                                <img src="/shop1.svg" alt="" />
                                <div className={styles.info}>
                                    <p><b>{i.name}</b></p>
                                    <p>
                                        <Tag textColor='#ff6600' color='none'>4.5分</Tag>
                                        <Tag textColor='#797979' color='none'>月售{i.num}</Tag>
                                        <Tag textColor='#ff6600' color='#FAF5F5'>平台专送</Tag>
                                    </p>
                                    <p>
                                        <Tag textColor='white' color='#ff6440'>团</Tag>
                                        <Tag textColor='black' color='none'>￥35</Tag>
                                        <span style={{ textDecoration: 'line-through', color: 'gray', fontSize: '.13rem' }} >￥38</span>
                                        <Tag textColor='black' color='none'>鸡腿汉堡双人套餐</Tag>
                                    </p>
                                    <p>
                                        <Tag textColor='white' color='#ff6440'>团</Tag>
                                        <Tag textColor='black' color='none'>￥35</Tag>
                                        <span style={{ textDecoration: 'line-through', color: 'gray', fontSize: '.13rem' }} >￥38</span>
                                        <Tag textColor='black' color='none'>鸡腿汉堡双人套餐</Tag>
                                    </p>
                                </div>
                            </div>
                        )
                    })
                }

            </div>
        </div>
    )
}

export default Type



